<template>
  <el-dialog v-model="visibleForm" :title="`${currentRow.custID ? '编辑' : '创建'}客户`" width="460px" :close-on-click-modal="false"
    :close-on-press-escape="false" @close="close()">
    <el-form ref="formBindingRef" :model="formData" :rules="formRules" label-width="100px">
      <el-tabs v-model="formData.activeTab" @tab-click="handleClickTab">
        <el-tab-pane label="客户基本信息" name="customInfo">
          <el-form-item label="客户ID:" prop="custID" v-if="currentRow.custID">
            <el-input v-model="formData.custID" style="width:200px" clearable placeholder="请输入客户ID"></el-input>
          </el-form-item>
          <el-form-item label="客户姓名:" prop="custName">
            <el-input v-model="formData.custName" style="width:200px" clearable placeholder="请输入客户名称"></el-input>
          </el-form-item>
          <el-form-item label="客户昵称:" prop="nickName">
            <el-input v-model="formData.nickName" style="width:200px" clearable placeholder="请输入客户昵称"></el-input>
          </el-form-item>
          <el-form-item label="客户微信号:" prop="wx">
            <el-input v-model="formData.wx" style="width:200px" clearable placeholder="请输入客户微信号"></el-input>
          </el-form-item>
          <el-form-item label="客户手机:" prop="phoneNo">
            <el-input v-model="formData.phoneNo" style="width:200px" clearable placeholder="请输入客户手机号"></el-input>
          </el-form-item>
          <el-form-item label="客户邮箱:" prop="email">
            <el-input v-model="formData.email" style="width:200px" clearable placeholder="请输入客户邮箱"></el-input>
          </el-form-item>
          <el-form-item label="渠道:" prop="qd_name" v-if="props.cusqdsMap.length">
            <el-select v-model="formData.qd_name" placeholder="请选择" @change="getList">
              <el-option v-for="item in props.cusqdsMap" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="业务员:" prop="salesID" v-if="props.salesMap.length && userRole == 1">
            <el-select v-model="formData.salesID" placeholder="请选择" @change="getList">
              <el-option v-for="item in props.salesMap" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="推荐人:" prop="referrerID" v-if="props.referrersMap.length">
            <el-select v-model="formData.referrerID" placeholder="请选择" @change="getList">
              <el-option v-for="item in props.referrersMap" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-tab-pane>

        <el-tab-pane label="客户状态" name="documentStatus">
          <el-form-item label="资料状态:" prop="documentStatus">
            <el-select v-model="formData.documentStatus" placeholder="请选择">
              <el-option v-for="item in  DeviceUtils.documentStatusMap" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>  
          <el-form-item label="面试状态:" prop="interviewStatus">
            <el-select v-model="formData.interviewStatus" placeholder="请选择">
              <el-option v-for="item in DeviceUtils.interviewStatusMap" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="批文状态:" prop="visaStatus">
            <el-select v-model="formData.visaStatus" placeholder="请选择">
              <el-option v-for="item in DeviceUtils.visaStatusMap" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="保险状态:" prop="insuranceStatus">
            <el-select v-model="formData.insuranceStatus" placeholder="请选择">
              <el-option v-for="item in DeviceUtils.insuranceStatusMap" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="入境卡状态:" prop="entranceCardStatus">
            <el-select v-model="formData.entranceCardStatus" placeholder="请选择">
              <el-option v-for="item in DeviceUtils.entranceCardStatusMap" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="入境状态:" prop="entryStatus">
            <el-select v-model="formData.entryStatus" placeholder="请选择">
              <el-option v-for="item in DeviceUtils.entryStatusMap" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="入职状态:" prop="shopId">
            <el-select v-model="formData.employmentStatus" placeholder="请选择">
              <el-option v-for="item in DeviceUtils.employmentStatusMap" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-tab-pane>
      </el-tabs>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" :disabled="isDisabled" @click="confirm(formBindingRef)">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref,  defineProps, defineEmits,  toRefs, reactive, watch, onMounted } from "vue";
import { customEdit } from '../api.js'
import { ElMessage } from "element-plus";
import * as DeviceUtils from "../utils";

let props = defineProps({
  showDialog: Boolean,
  currentRow: Object,
  salesMap: Array,
  referrersMap: Array,
  cusqdsMap: Array
})

const {currentRow} = toRefs(props)

const formBindingRef = ref();
const userRole = window.localStorage.getItem('login_role') || 1

let visibleForm = ref(props.showDialog)
let emit = defineEmits(['close', 'success'])

let formData = reactive({
  activeTab: "customInfo",

  custName: "",
  custID: "",
  nickName: "",
  referrerID: "",
  documentStatus: 1,
  interviewStatus: 1,
  visaStatus: 1,
  insuranceStatus: 1,
  entranceCardStatus: 1,
  entryStatus: 1,
  employmentStatus: 1,
  phoneNo: "",
  email: "",
  salesID: "",

  wx: "",
  salesIsGive: "",
  referrerIsGive: "",
  qd_name: ""
});

const formRules = reactive({
  custName: [
      { required: true, message: '请输入客户姓名', trigger: 'blur' },
  ],
  nickName: [
      { required: true, message: '请输入客户昵称', trigger: 'blur' },
  ],
  wx: [
      { required: true, message: '请输入客户客户微信号', trigger: 'blur' },
  ],
  phoneNo: [
      { required: true, message: '请输入客户手机号', trigger: 'blur' },
      { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' },
  ],
  email: [
      { type: 'email', message: '邮箱地址格式不正确', trigger: 'blur'},
  ],
  documentStatus: [
      { required: true, message: '请选择资料状态', trigger: 'change' },
  ],
  interviewStatus: [
      { required: true, message: '请选择面试状态', trigger: 'change' },
  ],
  visaStatus: [
      { required: true, message: '请选择批文状态', trigger: 'change' },
  ],
  insuranceStatus: [
      { required: true, message: '请选择保险状态', trigger: 'change' },
  ],
  entranceCardStatus: [
      { required: true, message: '请选择入境卡状态', trigger: 'change' },
  ],
  entryStatus: [
      { required: true, message: '请选择入职状态', trigger: 'change' },
  ]
})

onMounted(() => {
  if (currentRow.value.custID) {
    for (let key in currentRow.value) {
      formData[key] = currentRow.value[key]
    }
  }
  formData.activeTab = 'customInfo'
})

const close = () => {
  emit('close')
}
const confirm = async (formEl) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      submit()
    } else {
      ElMessage({
        showClose: true,
        message: "校验失败，请检查输入项！",
        type: "error",
      });
      return;
    }
  })
}
const submit = async () => {
  let params = {
    custName: formData.custName,
    nickName: formData.nickName,
    referrerID: formData.referrerID,
    documentStatus: formData.documentStatus,
    interviewStatus: formData.interviewStatus,
    visaStatus: formData.visaStatus,
    insuranceStatus: formData.insuranceStatus,
    entranceCardStatus: formData.entranceCardStatus,
    entryStatus: formData.entryStatus,
    employmentStatus: formData.employmentStatus,
    phoneNo: formData.phoneNo,
    email: formData.email,
    wx: formData.wx,
    qdName: formData.qd_name
  }
  if (formData.custID) {
    params.custID = formData.custID
  }
  if (formData.salesID) {
    params.salesID = formData.salesID
  }
  const res = await customEdit(params)
  if (0 === res.status) {
    ElMessage({
      message: `${formData.custID? '更新': '添加'}客户信息成功`,
      type: "success",
      duration: 3000,
    })
    emit('success')
    emit('close')
  } else {
    ElMessage({
      showClose: true,
      message: res.message || `${formData.custID? '更新': '添加'}客户信息失败`,
      type: "error",
    });
  }
}
</script>
<style lang="scss" scoped>
.desc {
  margin-bottom: 20px;
}
</style>